<div class="monitored-view" ng-controller="DragBoxController as vm">
    <div class="monitored-view-head">
        <div class="pull-left">
            <span class="btn btn-sm btn-default">1小时</span>
            <span class="btn btn-sm btn-default">3小时</span>
            <span class="btn btn-sm btn-default">6小时</span>
            <span class="btn btn-sm btn-default">12小时</span>
            <span class="btn btn-sm btn-default">1天</span>
            <span class="btn btn-sm btn-default">3天</span>
            <span class="btn btn-sm btn-default">7天</span>
            <span class="btn btn-sm btn-default">14天</span>
            <div class="datapicker">
                <span class="btn btn-sm btn-default" ng-click="vm.menudisplay = !vm.menudisplay">
                    <i class="ti-calendar"></i>
                    <span>自定义</span>
                </span>
                <div class="datapicker-menu" ng-class="{'open': vm.menudisplay}">
                    <div class="datapicker-menu-content">
                        <div class="datapicker-group">
                            <span>开始日期：</span>
                            <span>
                                <input type="text" class="datapicker-input">
                            </span>
                            <span>
                                <input type="text" class="datapicker-input">
                            </span>
                        </div>
                        <div class="datapicker-group">
                            <span>结束日期：</span>
                            <span>
                                <input type="text" class="datapicker-input">
                            </span>
                            <span>
                                <input type="text" class="datapicker-input">
                            </span>
                        </div>

                    </div>
                    <div class="datapicker-footer">
                        <span class="tip">tip</span>
                        <button class="btn btn-default">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="pull-right">
            <a class="btn btn-sm btn-default" ng-click="vm.display = !vm.display">
                <i class="ti-layout-sidebar-right"></i>
                <span>更多指标</span>
            </a>
            <a class="btn btn-sm btn-default" ng-click="vm.fullScreen('monitored-view-container')">
                <i class="ti-new-window"></i>
                <span>全屏</span>
            </a>
            <a class="btn btn-sm btn-default">
                <i class="icon-refresh"></i>
                <span>刷新</span>
            </a>
        </div>
    </div>
    <div class="monitored-view-container" ng-class="{'fullscreen-container' : vm.fullscreenEnable}">
        <ul ui-sortable="vm.sortableOptions" ng-model="vm.dragBoxs">
            <li resizable r-directions="['bottom', 'right']" ng-repeat="box in vm.dragBoxs">
                <drag-box data-model="box" data-sorts="vm.sorts"></drag-box>
            </li>
        </ul>
    </div>
    <div class="sliderbar" ng-class="{'close':vm.display}">
        <div class="sliderbar-header">
            <div class="sliderbar-title">
                <span>更多指标</span>
            </div>
            <div class="sliderbar-toolbar">
                <a class="btn-flat flat-default">
                    <i class="ti-close" ng-click="vm.display = !vm.display"></i>
                </a>
            </div>
        </div>
        <div class="sliderbar-container">
            <ul class="content">
                <li class="item">
                    <div class="item-box">
                        <span>CPU指标01</span>
                    </div>
                    <div class="item-check">
                        <i class="ti-check"></i>
                    </div>
                </li>
                <li class="item selected">
                    <div class="item-box">
                        <span>CPU指标02</span>
                    </div>
                    <div class="item-check">
                        <i class="ti-check"></i>
                    </div>
                </li>
                <li class="item selected">
                    <div class="item-box">
                        <span>CPU指标03</span>
                    </div>
                    <div class="item-check">
                        <i class="ti-check"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>